<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
  <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
  <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
  <div id="vuebox">
  <div class="container">
    <form class="form-horizontal" role="form">
      <label for="sele">请选择区域</label>
      <select id="sele" v-model="direct">
        <option value="0">请选择区域</option>
        <option v-for="item in addressList" :value="item.id">{{item.name}}</option>
      </select>
      <button type="button" class="btn btn-primary" @click="seleGood">查询</button>
    </form>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>库存数量</th>
        <th>订单状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in goodsLists">
        <td>{{item.id}}</td>
        <td>{{item.goodsname}}</td>
        <td>{{item.price}}</td>
        <td>{{item.counts}}</td>
        <td>
          <span v-if="item.status==0">已处理</span>
          <span v-if="item.status==1">处理中</span>
          <span v-if="item.status==2">未理中</span>
        </td>
        <td>
          <button type="button" class="btn btn-success" @click="upgoods(item.id)">修改</button>
        </td>
      </tr>
      </tbody>
    </table>
    <!--模态框-->
    <div class="modal" id="mymodal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button @click="hideModal" class="close" type="button">&times;</button>
            <div class="modal-title">添加学员</div>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="title" class="col-sm-2 control-label" >商品编号:</label>
                <div class="col-sm-10">
                  <input v-model="newGoods.id" id="title" type="text" readonly class="form-control" placeholder="请输入图书名称">
                </div>
              </div>
              <div class="form-group">
                <label for="summary" class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                  <input v-model="newGoods.goodsname" id="summary" type="text" class="form-control" placeholder="请输入图书摘要"/>
                </div>
              </div>
              <div class="form-group">
                <label for="uploaduser" class="col-sm-2 control-label">商品价格</label>
                <div class="col-sm-10">
                  <input v-model="newGoods.price" id="uploaduser" type="text" class="form-control" placeholder="请输入上传人">
                </div>
              </div>
              <div class="form-group">
                <label for="createdate" class="col-sm-2 control-label">库存数量</label>
                <div class="col-sm-10">
                  <input v-model="newGoods.counts" id="createdate" type="text" class="form-control" placeholder="请输入上传时间">
                </div>
              </div>
              <div class="form-group">
                <label for="categoryId" class="col-sm-2 control-label">订单状态:</label>
                <div class="col-sm-10">
                  <select id="categoryId" class="form-control" v-model="newGoods.status">
                    <option value="0">已处理</option>
                    <option value="1">处理中</option>
                    <option value="2">未处理</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" @click="hideModal()">关闭</button>
            <button class="btn btn-primary" @click="saveBook">保存</button>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
</body>
</html>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
                direct:"0",
                addressList:{},
                goodsLists:{},
                newGoods:{
                    id:"",goodsname:"",price:"",counts:"",status:""
                },
                result:""
            },
            methods:{
                seleGood:function () {
                  axios.get("/seleByAddrId",{params:{district:this.direct}}).then(res=>{
                      this.goodsLists=res.data;
                  })
                },
                upgoods:function (id) {
                  axios.get("/seleById",{params:{id:id}}).then(res=>{
                      this.newGoods=res.data;
                  })
                    $("#mymodal").modal('show')
                },
                hideModal:function () {
                    $("#mymodal").modal('hide')
                },
                saveBook:function () {
                    axios.post("/upGoods",this.newGoods).then(res=>{
                        this.result=res.data;
                        if(this.result=="SUCCESS"){
                            alert("修改成功!")
                            this.hideModal();
                            axios.get("/seleByAddrId",{params:{district:this.direct}}).then(res=>{
                                this.goodsLists=res.data;
                            })
                        }else{
                            alert("修改失败!")
                        }
                    })
                }

            },
            mounted(){
                axios.get("/seleGoodsaddress").then(res=>{
                    this.addressList=res.data;
                })
            }
    })
</script>